<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <el-row class="top-btn">
          <el-col :span="12">
            <el-button type="success" @click="handleAllDelete">删除所有</el-button>
            <el-button @click="rollback" style="color:#1C84C6">返回</el-button>
          </el-col>
          <el-col :span="12">
            <el-input class="handle-input" placeholder="请输入要查询的日志关键字">
              <template #append>
                <el-button :icon="Search" />
              </template>
            </el-input>
          </el-col>
        </el-row>
      </div>
      <el-divider></el-divider>
      <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" :header-cell-style="{ color: '#2A62BC' }"
        border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="id" label="序号" align="center" />
        <el-table-column label="访问方法" align="center">
          <template #default="scope">{{ scope.row.method }}</template>
        </el-table-column>
        <el-table-column prop="uri" label="访问的URI" align="center" />
        <el-table-column prop="date" label="访问时间" align="center" />
        <el-table-column prop="time" label="访问时长" align="center"> </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-row class="right-btn">
              <el-button color="#e35148" :icon="Delete" @click="handleDelete(scope.$index, row)">删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue'
import { Search } from '@element-plus/icons-vue'
import imgURL from '@/assets/img/dn.png'
/*******返回****** */
/**flag日志组件的显示 */
const props = defineProps({
  flag: String
})
const { flag } = toRefs(props)
console.log(flag, '=======')
const emit = defineEmits(['update:flag'])
const rollback = () => {
  emit('update:flag', '1')
}

const multipleTableRef = ref()
const multipleSelection = ref([]) //被选中的选项
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const tableData = [
  {
    id: 1,
    method: 'GET',
    uri: '/app/book/toUpdate.do',
    date: '2016-05-02 14:46:05',
    time: 2,
  },
  {
    id: 2,
    method: 'POST',
    uri: '/app/book/Update.do',
    date: '2016-05-02 14:46:05',
    time: 2,
  },
]
/*************删除单个日志的操作**************/
const handleDelete = (index, row) => {
  //to 删除
  // 二次确认删除
  ElMessageBox.confirm('确定要删除吗？', '提示', {
    type: 'warning'
  })
    .then(() => {
      ElMessage.success('删除成功');
      //to 传递id 到后台 

      // 删除成功后
      // getData()
    })
    .catch(() => { });
}
/**************删除多个日志的操作************************* */
/*******删除多个**** */
//删除多个数据  to......
const handleAllDelete = () => {
  // console.log('删除多个')
  console.log(multipleSelection.value, '===拿到所有要删除的日志数据====')
  if (multipleSelection.value.length == 0) {
    ElMessage.error('请选择项')
    return
  }
  // console.log(state.multipleSelection.map(item=>item.id))
  //axios删除的操作
  // deleteAllAdmin({ids:state.multipleSelection.map(item=>item.id)})	
}

</script >
<style lang="less" scoped>
.handle-box {
  margin-bottom: 20px;
}


.handle-input {
  float: right;
  width: 240px;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #F56C6C;
}

.blue {
  color: #1296e2;
  font-weight: bold;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.cell {
  display: inline-block;

  .el-button {
    margin-left: 0px;
  }
}

.right-btn {
  justify-content: center;

  .el-button {
    margin-right: 6px;
    padding: 1px 5px;
  }
}

.form-demo {
  .el-input {
    width: 60%;
  }

  .el-input-number {
    width: 60%;
  }

}

.handle-input .el-input-group__append button.el-button,
.el-input-group__append button.el-button:hover {
  background-color: #1C84C6;
  color: #fff;
  font-weight: 700;
}
</style>